Conversation
…put. dont know how to import the content from the json file. didn't do the 'details page'
Tamir198
left a comment
Tamir198
left a comment
There was a problem hiding this comment.
Please remove all of your comments
Do not use innerHTML
| <li data-region="europe">Europe</li> | ||
| <li data-region="oceania">Oceania</li> | ||
| <li data-region="all" onclick="filterRegion(this)">All</li> | ||
| <li data-region="africa" onclick="filterRegion(this)" >Africa</li> |
There was a problem hiding this comment.
Can you tell me what this refers to ?
| </div> | ||
| </a> | ||
| <section id="countries-grid" class="countries-grid"> | ||
|
|
There was a problem hiding this comment.
Why do you have both class and id and why both of them are with the same name ?
|
|
||
| const CountriesData=[ | ||
| { | ||
| "name": "Åland Islands", |
There was a problem hiding this comment.
This should be inside json file
| // console.log("hi"); | ||
| // import countries from './CountriesData.json' | ||
| //console.log(CountriesData) | ||
| let countriesGrid = document.querySelector(".countries-grid"); |
There was a problem hiding this comment.
Remove all of the comments they are not relevant
| //console.log(value) | ||
| const searchedCountries = CountriesData.filter( | ||
| (country) => country.name.toLowerCase().includes(value) | ||
| ); |
There was a problem hiding this comment.
In case the value is "" do you want to filter everything? or maybe return the entire data as is?
| ); | ||
| //console.log(searchedCountries); | ||
| countriesGrid.innerHTML = renderCountries(searchedCountries); | ||
|
|
There was a problem hiding this comment.
Do not use innerHTML because it is a dangerous method
|
|
||
| filter.visibility === "hidden" | ||
| ? ((filter.visibility = "visible"), (filter.opacity = 1)) | ||
| : ((filter.visibility = "hidden"), (filter.opacity = 0)); |
There was a problem hiding this comment.
You can extract the repeating code into a function :
function toggleVisibility(filter, isVisible) {
filter.visibility = isVisible ? "visible" : "hidden";
filter.opacity = isVisible ? 1 : 0;
}
const isCurrentlyHidden = filter.visibility === "hidden";
toggleVisibility(filter, isCurrentlyHidden);But generally use css classes to style elements and not from js
2 participants
No description provided.